<template>
  <div id="ProductStockInfoList">
    <!--         Breadcrumbs -->
    <div class="breadcrumbs" style="margin: 0px;padding-top: 20px;">
      <ul>
        <li class="home"><a href="index.html" title="Go to Home Page"><strong style="font-size: 18px;">基础数据</strong></a>
          <span>/</span>
        </li>
        <li><strong>库存信息管理</strong><span>/</span></li>
        <li><strong>库存信息列表</strong></li>
      </ul>
    </div>
    <article class="col-main">
      <div class="my-account block block-account" style="padding-left: 20px;padding-right: 20px;">
        <div style="padding: 20px 20px 30px 20px">
          <span style="font-size: 30px;font-weight: bolder">库存信息列表</span>
          <router-link v-show="role=='老板' || role=='系统管理员'" to="CreateProductStockInfo"  class="btn btn-success" style="float: right;margin-top: 10px">新建仓库信息</router-link>
        </div>

        <form action="">
          <div class="row" style="margin-bottom: 30px">
            <div class="col-sm-2 col-md-2 text-center" style="padding: 0px">
              <h4>产品类型:</h4>
            </div>
            <div class="col-sm-3 col-md-3">
              <select v-model="stockVo.productType" class="form-control" style="width: 180px">
                <option value="" >-全部-</option>
                <option v-for="item in productTypes" :value=" item.dictionaryEntry ">{{ item.dictionaryEntry }}</option>
              </select>
            </div>
            <div class="col-sm-2 col-md-2 text-center" style="padding: 0px">
              <h4>仓库名字:</h4>
            </div>
            <div class="col-sm-3 col-md-3">
              <input v-model="stockVo.cargoName" class="form-control" placeholder="请输入产品存放仓库名字" style="width: 180px;">
            </div>
            <div class="col-sm-2 col-md-2">
              <button v-on:click="this.loadStocks" class="btn btn-primary">查询</button>
            </div>
          </div>

        </form>

        <table class="table">
          <thead>
          <tr>
            <th>编号</th>
            <th>产品</th>
            <th>产品类型</th>
            <th>产品批次</th>
            <th>仓库名字</th>
            <th>货位</th>
            <th>数量</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in stocks">
            <th scope="row">{{index+1+(current-1)*limit}}</th>
            <td>{{item.productSeries}}{{item.productModel}}</td>
            <td>{{item.productType}}</td>
            <td>{{item.productBatch}}</td>
            <td>{{item.storeName}}</td>
            <td>{{item.cargoSpace}}</td>
            <td>{{item.cargoNum}}</td>
            <td>
              <button v-show="role=='老板' || role=='系统管理员' || role=='客户经理'" v-on:click="toDetailsStock(item.stockId)" class="btn btn-info btn-sm">详情</button>
              <button v-show="role=='老板' || role=='系统管理员'" v-on:click="toUpdate(item.stockId)" class="btn btn-default btn-sm">编辑</button>
              <button v-show="role=='老板' || role=='系统管理员'" @click="open(item.stockId,item.storeName)" class="btn btn-danger btn-sm">删除</button>
            </td>
          </tr>
          </tbody>
        </table>
        <div class="block text-center">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </article>
  </div>
</template>

<script>
export default {
  name: "ProductStockInfoList",
  data(){
    return{
      currentPage: 1,
      limit:10,
      current:1,
      total:0,
      productTypes:[],
      stockVo:{
        productType:'',
        cargoName:''
      },
      stocks:[],
      role:''
    }
  },
  methods:{
    toUpdate(stockId){
      this.$router.push({path:'/MemuBar/UpdateProductStockInfo',query:{stockId:stockId}})
    },
    toDetailsStock(stockId){
      this.$router.push({path:'/MemuBar/ProductStockInfoDetails',query:{stockId:stockId}})
    },
    getProductTypes(){
      this.role=localStorage.getItem("role");
      this.role=localStorage.getItem("role");
      this.$axios.get("/stock/deleteStock").then(
        res=>{
          this.productTypes = res.data.data
        }
      )
    },
    handleSizeChange(val) {
      this.limit = val;
      this.loadStocks()
    },
    handleCurrentChange(val) {
      this.current = val;
      this.loadStocks()
    },
    loadStocks(){
      this.$axios.get("/stock/loadStocks",{
        params:{
          limit:this.limit,
          current:this.current,
          productType:this.stockVo.productType,
          cargoName:this.stockVo.cargoName
        }
      }).then(
        res=>{
          this.stocks=res.data.data.myData,
            this.total=res.data.data.total
          // console.log(res.data.data)
        }
      )
    },
    open(stockId,storeName) {
      this.$confirm('此操作将永久删除 【'+storeName+'】 , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$axios.delete('/stock/deleteStock',{
          params:{
            stockId:stockId
          }
        }).then(
          res=>{
            this.$message({
              type: 'success',
              message: res.data.message
            });
            this.$router.go(0);
          }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  created() {
    this.getProductTypes()
    this.loadStocks()
  }
}
</script>

<style scoped>

</style>
